<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    @include("/include/_header.html", {'title':'HMI主页'}){}
    <!--    <script type="application/javascript" src="c19032/semiautomatic/stomp.js" ></script>-->
    <meta charset="utf-8">
    <title>全端复杂组合</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
<div class="layui-fluid" style="height: 95%">
    <div class="layui-row layui-col-space12" style="height: 100%;background-color: aliceblue">

        <div class="layui-col-md12" style="height: 72%">

            <div class="hora-body" id="hora-body">
                <div id="hora-div" class="hora-div">
                </div>
            </div>

            <div style="height: 100%;width: 25%;float: right">
                <div style="height: 30%">
                    <div class="layui-card-header" style="height: 10%">
                        <h3>实时位置</h3>
                    </div>
                    <div class="layui-card-body">
                        <div class="taskInfoInput">
                            <label class="layui-form-label">大车位置</label>
                            <div class="layui-input-block">
                                <input type="text" id="craneX" name="x" required lay-verify="required" disabled
                                       autocomplete="off" class="layui-input" value=0>
                            </div>
                        </div>
                        <div class="taskInfoInput">
                            <label class="layui-form-label">小车位置</label>
                            <div class="layui-input-block">
                                <input type="text" id="craneY" name="y" required lay-verify="required" disabled
                                       autocomplete="off" class="layui-input" value=0>
                            </div>
                        </div>
                        <!--<div class="taskInfoInput">
                            <label class="layui-form-label">起升高度</label>
                            <div class="layui-input-block">
                                <input type="text" id="craneZ" name="起升高度" required lay-verify="required" disabled
                                       autocomplete="off" class="layui-input" value=0>
                            </div>
                        </div>-->
                    </div>
                </div>

                <hr/>

                <div style="height: 30%">
                    <div class="layui-card-header" style="height: 10%">
                        <h3>抓取位置</h3>
                    </div>
                    <div class="layui-card-body">
                        <div class="taskInfoInput">
                            <label class="layui-form-label">大车位置</label>
                            <div class="layui-input-block">
                                <input type="text" id="craneXB" name="大车位置B" required lay-verify="required" disabled
                                       autocomplete="off" class="layui-input" value=0>
                            </div>
                        </div>
                        <div class="taskInfoInput">
                            <label class="layui-form-label">小车位置</label>
                            <div class="layui-input-block">
                                <input type="text" id="craneYB" name="小车位置B" required lay-verify="required" disabled
                                       autocomplete="off" class="layui-input" value=0>
                            </div>
                        </div>
                    </div>
                </div>

                <hr/>

                <div style="height: 30%">
                    <div class="layui-card-header" style="height: 10%">
                        <h3>放置位置</h3>
                    </div>
                    <div class="layui-card-body">
                        <div class="taskInfoInput">
                            <label class="layui-form-label">大车位置</label>
                            <div class="layui-input-block">
                                <input type="text" id="craneXB" name="大车位置C" required lay-verify="required" disabled
                                       autocomplete="off" class="layui-input" value=0>
                            </div>
                        </div>
                        <div class="taskInfoInput">
                            <label class="layui-form-label">小车位置</label>
                            <div class="layui-input-block">
                                <input type="text" id="craneYB" name="小车位置C" required lay-verify="required" disabled
                                       autocomplete="off" class="layui-input" value=0>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
        <hr style="background-color: #F1F1F1">

        <div class="layui-col-md12" style="height: 25%;">
            <div class="layui-panel" style="width:100%;background-color: aliceblue;margin: 5px">
                <div style="height: 50px">
                    <div class="tipCurrent"><h3>当前任务</h3></div>
                    <div class="tipMain">
                        <div style="float: left;">当前位置<div class="tipDiv currentPoint"></div></div>
                        <div class="tipItem">抓取位置<div class="tipDiv grabPoint"></div></div>
                        <div class="tipItem">放置位置<div class="tipDiv dropPoint"></div></div>
                    </div>
                    <div style="width: 25%;float: right;margin-top: 10px">
                        <div class="layui-input-inline">当前时间：</div>
                        <div class="layui-input-inline" style="margin-top: 2px" id="nowTime">
                        </div>
                    </div>
                </div>
                <div style="margin-top: 5px;height: 100px">
                    <div class="layui-row layui-col-sm8 layui-col-md4" style="height: 100px;width: 31%">
                        <div>
                            <label class="layui-form-label">任务类型</label>
                            <div class="layui-input-block">
                                <input type="text" id="type" name="任务类型" required lay-verify="required" disabled
                                       autocomplete="off" class="layui-input" placeholder="暂无任务">
                            </div>
                        </div>

                        <div style="margin-top: 10px">
                            <label class="layui-form-label">钢坯号</label>
                            <div class="layui-input-block">
                                <input type="text" id="billetNumber" name="钢坯号" required lay-verify="required" disabled
                                       autocomplete="off" class="layui-input" placeholder="暂无任务">
                            </div>
                        </div>
                    </div>

                    <div class="layui-row layui-col-sm8 layui-col-md4" style="height: 100px;width: 31%">
                        <div>
                            <label class="layui-form-label">开始区域</label>
                            <div class="layui-input-block">
                                <input type="text" id="beginLocation" name="开始区域" required lay-verify="required" disabled
                                       autocomplete="off" class="layui-input" placeholder="暂无任务">
                            </div>
                        </div>

                        <div style="margin-top: 10px">
                            <label class="layui-form-label">放置区域</label>
                            <div class="layui-input-block">
                                <input type="text" id="endLocation" name="放置区域" required lay-verify="required" disabled
                                       autocomplete="off" class="layui-input" placeholder="暂无任务">
                            </div>
                        </div>
                    </div>

                    <div class="layui-row layui-col-sm8 layui-col-md4" style="height: 100px;width: 36%">
                        <div>
                            <button type="button" style="width: 150px;margin-left: 30px" class="layui-btn down" id="status" value="0">天车下线</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@include("/include/_container.html", {'js':'/lingyuan/hmi/index.js'}){}


</body>
<style>
    .down{
        background-color: red;
    }

    .handTask{
        color: #cccccc;
    }

    .tipCurrent{
        width: 20%;
        float: left;
        margin-left: 15px;
        margin-top: 10px;
        color: black
    }

    .tipMain{
        width: 40%;
        float: left;
        margin-top: 10px;
        margin-left: 75px
    }

    .tipItem{
        float: left;
        margin-left: 20px
    }

    .tipDiv{
        width: 15px;
        height: 15px;
        float: right;
        margin-top: 2px;
        margin-left: 5px
    }

    .currentPoint{
        background-color: #00c800;
    }

    .grabPoint{
        background-color: #FFB800;
    }

    .dropPoint{
        background-color: #01AAED;
    }


    /*============*/
    .hora-body {
        height: 100%;
        width: 75%;
        float: left;
        overflow: auto;
        scroll-behavior: smooth;
    }

    .hora-row {
        width: 100%;
        height: 20px;
        clear: both;
    }


    .hora-column {
        width: 18px;
        height: 18px;
        border: #f2dede solid 0.5px;
        float: left;
        font-size: 8px;
        text-align: center;
        cursor: pointer;
        color: #000000;
        line-height: 25px;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    .hora-div {
        width: 6000px;
        height: 420px;
        overflow-x: auto;
        position: relative;
        margin-bottom: 3px;
    }


    #bigCar {
        position: absolute;
        height: 100%;
        width: 54px;
        opacity: 0.5;
        pointer-events: none;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    #smCar {
        width: 52px;
        height: 25px;
        margin: 0px auto;
        opacity: 0.5;
        background: green;
        position: absolute;
        bottom: 0px;
        left: 1px;
    }

    /*谷歌滚动条样式*/

    ::-webkit-scrollbar {width:5px;height:5px;position:absolute}
    ::-webkit-scrollbar-thumb {background-color:#5bc0de}
    ::-webkit-scrollbar-track {background-color:#F1F1F1}

    /**  #f0f8ff */

    body .fault-class .layui-layer-title{
        background:rgb(189, 204, 234);
        color:black;
        border: none;}

    body .err-class .layui-layer-btn{
        text-align: center;
    }

    body .err-class .layui-layer-content{
        font-size: 18px;
    }

    body .err-class .layui-layer-btn a{
        width: 120px;
        height: 50px;
        text-align: center;
        font-size: 18px;
        line-height: 55px;
    }

    <!-- .layui-table-cell{
             display:table-cell;
             vertical-align: middle;
         }
    -->
    .controlPanel
    {
        height:
                30vh;
        background-color:
                aliceblue;
        margin:
                5px;
    }
    .taskInfoInput
    {
        text-align:
                left;
        margin-bottom:
                10px;
        margin-top:
                10px;
    }
    .faultCard
    {
        height:
                15vh;
        background-color:
                aliceblue;
        margin:
                5px;
    }
    .table-button
    {
        margin-top:
                0px;
        margin-bottom:
                0px;
    }

    body .skipClass .layui-layer-content{
        font-size: 20px  !important;  //字体大小; !important：提升指定样式规则的应用优先权
    line-height: 24px;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 20px;
        position: relative;
        color: red;
        font-weight: bold; //字体加粗
    word-break: break-all;
    }

    body .skipClass .layui-layer-btn0 {
        font-size: 15px;
        width: 60px;
        height: 40px;
        text-align: center;
        line-height: 40px;
    }

    body .skipClass .layui-layer-btn1 {
        font-size: 15px;
        width: 60px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        margin-left: 25px;
    }

    .taskInfoInput
    {
        text-align:
                left;
        margin-bottom:
                10px;
        margin-top:
                10px;
    }

</style>
</html>